<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogData.dialogVisible"
    width="600px"
    v-loading="listLoading"
    @close="closeDialog"
    @open="openDialog"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div class="container">
      <el-form ref="form" :model="list" :rules="rules" label-width="0" class="form">
        <el-form-item prop="oldPassword">
          <el-input v-model="list.oldPassword" type="password" placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input v-model="list.newPassword" type="password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item prop="passwordAgain">
          <el-input v-model="list.passwordAgain" type="password" placeholder="请再次输入新密码" />
        </el-form-item>
        <el-button type="primary" @click="onSubmit('form')" class="submit-btn">提交</el-button>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import * as api from '@/api/my-info'
import { getId, getWorkerId } from '@/utils/auth'
import store from '@/store'
var CryptoJS = require('crypto-js') // encryption

const defaultList = {
  password: null,
  newPassword: null,
  newPasswordAgain: null
}

export default {
  name: 'forget-psd',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false,
          value: '',
          id: ''
        }
      }
    }
  },
  data() {
    return {
      listLoading: false,
      rules: this.rules,
      list: Object.assign({}, defaultList)
    }
  },
  methods: {
    /* 重置表单 */
    resetForm(formName) {
      this.list = Object.assign({}, defaultList)
    },
    /* 关闭 */
    closeDialog() {
      this.dialogData.dialogVisible = false
      this.list = Object.assign({}, defaultList)
    },
    /* 打开 */
    openDialog() {
      this.list = JSON.parse(JSON.stringify(this.dialogData.value))
    },
    /* 提交 */
    onSubmit(formName) {
      if (
        this.list.oldPassword &&
        this.list.newPassword &&
        this.list.newPassword !== this.list.passwordAgain
      ) {
        this.$message({
          message: '两次输入的密码不一致，请重新填写',
          type: 'warning',
          duration: 3000
        })
      } else {
        // md5加密密码
        let key = 'f218b81c0528bf69781ff8a7d6729171'
        let oldPassword = CryptoJS.MD5(
          key + this.list.oldPassword + key
        ).toString(CryptoJS.enc.Hex)
        let newPassword = CryptoJS.MD5(
          key + this.list.newPassword + key
        ).toString(CryptoJS.enc.Hex)
        let data = {
          id: this.dialogData.value.id,
          password: oldPassword,
          newPassword
        }
        if (getWorkerId()) {
          data.workerUserId = getWorkerId()
        }
        this.requestFuc
          .onSubmit({
            _that: this,
            formName,
            data,
            addFuc: api.savePsd,
            updFuc: api.savePsd
          })
          .then(response => {
            if (response.code == '001') {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 8000
              })
              return
            }
            // 退出登录删除用户信息
            store.dispatch('user/logout')
            this.$alert(
              '您的新密码已经重设成功，点击确定跳转到登录页',
              '提示',
              {
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                  // this.$router.push({ path: '/login' })
                  location.reload()
                }
              }
            )
          })
          .catch(error => {
            this.listLoading = false
          })
      }
    }
  }
}
</script>
<style scoped>
.step {
  margin: 40px auto;
}
.form {
  width: 50%;
  margin: 0 auto;
}
.submit-btn {
  display: block;
  margin: 50px auto;
  width: 100px;
}
</style>
